<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——简单过滤选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body {font-size:12px;text-align: center;}
        div {width: 241px;height: 83px;border:  solid 1px #eee}
        h1 {font-size: 13px}
        ul {list-style-type: none; padding: 0px}
        .DefClass, .NotClass{ height: 23px;width: 60px;line-height: 23px;float: left;
            border-top: solid 1px #eee; border-bottom: solid 1px #eee }
        .GetFocus {width: 58px; border: solid 1px #666; background-color: #eee}
        #spMove {width: 238px; height: 23px;line-height: 23px}
    </style>
</head>
<body>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="DefClass">Item 0</li>
            <li class="DefClass">Item 1</li>
            <li class="NotClass">Item 2</li>
            <li class="DefClass">Item 3</li>
        </ul>
        <span >我也是span</span>
        <span id="spMove">Span Move</span>
    </div>
</body>
<script type="application/javascript">
    // 基本过滤选择器：根据某类过滤规则进行过滤
    $(function () {
        /*获取第一个元素（:first）*/
        $("li:first").addClass('GetFocus'); // Item 0
        /*获取最后一个元素(:last)*/
        $("li:last").addClass('GetFocus'); // Item 3
        /*获取与给定选择器不匹配的元素(:not(给定选择器))*/
        $("li:not(.DefClass)").addClass('GetFocus'); // Item 2
        /*获取索引为偶数的元素(:even)*/
        $("li:even").addClass('GetFocus'); // Item 0  Item 2
        /*获取索引为奇数的元素(:odd)*/
        $("li:odd").addClass('GetFocus'); // Item 1  Item 3
        /*获取索引大于x的元素(:gt(x))*/
        $("li:gt(1)").addClass('GetFocus'); // Item 2  Item 3
        /*获取元素索引小于x的元素(:lt(x))*/
        $("li:lt(1)").addClass('GetFocus'); // Item 0
        /*获取元素索引等于x的元素(:eq(x))*/
        $("li:eq(1)").addClass('GetFocus'); // Item 1

        animateIt();
        /*获取正在运行动画效果的元素(:animated)*/
        $("span:animated").addClass("GetFocus");
    });

    //增加动画效果
    function animateIt(){  // fast . slow . (加时间毫秒数 ：3000)
        $("#spMove").slideToggle(1000,arguments.callee);
    }
</script>
</html>